<!--  -->
<template>
  <div class="query-container">
    <div class="flex-sub">
      <slot />
    </div>
    <div>展开</div>
  </div>
</template>

<script>
  import elementResizeDetectorMaker from 'element-resize-detector'

  export default {

    components: {},
    props: {
      watchElement: { type: String, default: '' }
    },
    data() {
      return {
      }
    },

    computed: {},

    mounted() {
      if (this.watchElement && this.$refs[this.watchElement]) {
        const erdm = elementResizeDetectorMaker()
        erdm.listenTo(this.$refs[this.watchElement], element => {
          console.log(element.offsetHeight)
        })
      }
    },

    methods: {}
  }
</script>
<style lang="scss" scoped>
  .query-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
</style>
